<div class="wa-p-device">

  <div class="device-item">
    <!--<mat-tab-group [(selectedIndex)]="tabIndex">-->

      <!--<mat-tab label="Device">-->

        <div class="filter-state" *ngIf="deviceControl">
          <mat-select placeholder="请选择厂商" [(ngModel)]="brandState">
            <mat-option>None</mat-option>
            <mat-option *ngFor="let state of firmFilterStates" [value]="state.name">{{ state.name }}</mat-option>
          </mat-select>
          <mat-select placeholder="请选择平台" [(ngModel)]="platformState">
            <mat-option>None</mat-option>
            <mat-option *ngFor="let state of platformFilterStates" [value]="state.name">{{ state.name }}</mat-option>
          </mat-select>
          <mat-select placeholder="请选择系统" [(ngModel)]="systemState">
            <mat-option>None</mat-option>
            <mat-option *ngFor="let state of systemFilterStates" [value]="state.name">{{ state.name }}</mat-option>
          </mat-select>
          <button mat-raised-button  color="primary" (click)="findDeviceInState()">查询</button>
          <mat-checkbox [(ngModel)]="checked" color="primary">全选</mat-checkbox>
        </div>

        <div *ngIf="viewDevices.length > 0">
          <ul>
            <device-item [checked]="checked" [deviceControl]="deviceControl" *ngFor="let dev of viewDevices" [dev]="dev"
                         (click)="nextDeviceTab(dev)"></device-item>
          </ul>
        </div>
        <div  *ngIf="viewDevices.length == 0">
          <h1>无项目</h1>
        </div>
      <!--</mat-tab>-->
      <!--<mat-tab label="Detail" *ngIf="!deviceControl">-->
      <!--<h1>{{dev}}</h1>-->
      <!--</mat-tab>-->
    <!--</mat-tab-group>-->
  </div>
</div>
